<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #000;
            /* transition: 2s; */
            left: 0;
        }
    </style>
</head>

<body>
    <div class="a"></div>

    <script>

        var oDiv = document.querySelector('.a');

        // oDiv.onmouseover = function () {
        //     oDiv.style.left = '1000px';
        // }


        // transition 本质上其实就是定时器

        // var start = oDiv.offsetLeft;
        // var end = 1000;
        // var speed = 10;
        // var t = setInterval(function () {
        //     start += speed;
        //     oDiv.style.left = start + 'px';
        //     if (start >= end) {
        //         clearInterval(t);
        //     }
        // }, 10)


        // move(oDiv, 900, 40)


        // 从左向右运动
        // function move(ele, end, speed) {
        //     var start = oDiv.offsetLeft;
        //     // var end = 1000;
        //     // var speed = 10;
        //     var t = setInterval(function () {
        //         start += speed;
        //         ele.style.left = start + 'px';
        //         if (start >= end) {
        //             // 速度不一定能整除，需要把终点位置固定
        //             ele.style.left = end + 'px';
        //             clearInterval(t);
        //         }
        //     }, 10)
        // }


        // move(oDiv, 0, -10)

        // 从右向左运动
        // function move(ele, end, speed) {
        //     var start = ele.offsetLeft;
        //     // var end = 0;
        //     // var speed = -10;
        //     var t = setInterval(function () {
        //         start += speed;
        //         ele.style.left = start + 'px';
        //         if (start <= end) {
        //             // 速度不一定能整除，需要把终点位置固定
        //             ele.style.left = end + 'px';
        //             clearInterval(t);
        //         }
        //     }, 10)
        // }


        // move(oDiv, 1000, 10, 'left', function () {
        //     alert('我真牛逼')
        // })

        // move(oDiv, 1000, 10, 'left', function () {
        //     move(oDiv, 0, 10, 'left')
        // })

        move(oDiv, 1000, 10, 'left')
        move(oDiv, 400, 10, 'top')


        // 合并
        function move(ele, end, speed, attr, cb) {
            var start = parseInt(getComputedStyle(ele)[attr]);
            // var end = 0;
            // var speed = -10;
            speed = end > start ? speed : -speed;
            var t = setInterval(function () {
                start += speed;
                ele.style[attr] = start + 'px';
                if (Math.abs(end - start) <= Math.abs(speed)) {
                    // 速度不一定能整除，需要把终点位置固定
                    ele.style[attr] = end + 'px';
                    clearInterval(t);
                    console.log('运动结束了');
                    // 运动结束以后想做一件事情
                    // if (cb) {
                    //     cb()
                    // }
                    console.log(cb);
                    cb && cb();

                }
            }, 10)
        }





    </script>

</body>

</html>